<template>
    <div class="fields-com">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group class="fields-group-wrap" v-model="checkedArr" @change="handlecheckedArrChange">
            <div class="item" v-for="item in menuData">
                <el-checkbox  :label="item.value" :key="item.value"></el-checkbox>
                <zidian  :info="zdItem(item)" v-if="showZd" @complete="editComplete"></zidian>
                <data-type-select :data-type="item.dataType" :info="dealItem(item)" @complete="editComplete"></data-type-select>
                <text-edit :data-text="item.name"  :info="dealItem(item)"  @complete="editComplete"></text-edit>
            </div>
        </el-checkbox-group>
    </div>
</template>

<script>
    import ajax from '@api/ajax'
    import {QUERY_EXIST_NICKNAME} from '@api/url'

    import DataTypeSelect from "./dataTypeSelect";
    import TextEdit from "./textEdit";
    import zidian from "./zidian";
    export default {
        name: 'fieldsCom',
        components: {zidian, TextEdit, DataTypeSelect},
        props: {
            tableData: {//全部字段列表
              type: Array
            },
            selectedData:{//选中字段列表
                type: Array
            }
        },
        data () {
          return {
              checkAll: false,
              checkedArr:[],//选中字段
              isIndeterminate: true,
              menuData:[],
              showZd:false,
              exixtLists:[],//存在的修改过的别名数据
          }
        },
        computed:{
            dealItem(){
                return function (item) {
                    item.nickName=item.name;//别名
                    item.colName=item.value;//列名
                    return item;
                }
            },
            zdItem(){
                return function (item) {
                    let temp = this.exixtLists.filter(cur=>cur.colName==item.colName);//查看该数据是否有修改，有就使用修改后的数据
                    if(temp && temp.length>0){
                        return temp[0]
                    }else{
                        item.colName=item.value;//列名
                        return item;
                    }
                }
            }
        },
        watch:{
            tableData(val){
                this.menuData=val;
                this.searchExixtData();
            },
            selectedData(val){
                this.checkedArr=val;
            }
        },
        mounted(){
            this.menuData=this.tableData;
            this.checkedArr=this.selectedData;
        },
        methods: {
            handleCheckAllChange(val) {
                let arr =this.menuData||[]
                var values =arr.map(obj => obj.value);
                this.checkedArr = val ? values : [];
                this.isIndeterminate = false;
                this.checkboxChange();
            },
            handlecheckedArrChange(value) {
                let options = [],arr=  this.menuData||[];
                arr.forEach(item=>{
                    if(value.includes(item.value)) {
                        options.push(item);
                    };
                })
                this.checkAll = options.length === arr.length;
                this.isIndeterminate = options.length > 0 && options.length < arr.length;
                this.checkboxChange();
            },
            editComplete(res){//修改完成
                this.$emit('editComplete',res)
            },
            checkboxChange(){
                let params= this.menuData.filter(item=>{
                    return this.checkedArr.includes(item.value)
                })
                this.$emit('checkboxChange',params);
            },
            //查询存在的别名数据，用于字典回显
            searchExixtData(){
                ajax.post(QUERY_EXIST_NICKNAME, {
                    optMode: '1', modelId: this.menuData[0].modelId, pageNo: 1, pageSize: 1000
                }).then(res=>{
                    this.exixtLists=res.data;
                    this.showZd=true;
                })
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .fields-com{
        .el-checkbox{
            display: flex;
            align-items: center;
            margin-bottom: 0;
            .el-checkbox__inner{
                width 18px
                height 18px
                &:after{
                    left: 6px;
                    top: 3px;
                }
            }
        }
        .item{
            position: relative
            display: flex;
            align-items: center;
            justify-content flex-start
            margin-bottom 8px
            margin-top 4px
            font-size 14px
            color #3a3a3a
            margin-right 10px
            .el-checkbox__label{
                display none!important
            }
        }
    }
</style>
